<template>
	<div class="Icon">
		<ul >
			<li v-for="item in imglist " :key="item.id">
				<router-link to="/">
					<img :src="item.img" />
					<p>{{item.txt}}</p>
				</router-link>
				
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Icon',
		data(){
			return{
				imglist:[
					{id:1,img:require('@/assets/iconimg/icon01.png'),txt:'国内游'},
					{id:2,img:require('@/assets/iconimg/icon02.png'),txt:'住宿'},
					{id:3,img:require('@/assets/iconimg/icon03.png'),txt:'境外游'},
					{id:4,img:require('@/assets/iconimg/icon04.png'),txt:'海岛度假'},
					{id:5,img:require('@/assets/iconimg/icon05.png'),txt:'境外游'},
					{id:6,img:require('@/assets/iconimg/icon06.png'),txt:'出行方式'},
					{id:7,img:require('@/assets/iconimg/icon07.png'),txt:'周边游'},
					{id:8,img:require('@/assets/iconimg/icon08.png'),txt:'户外游'}
				]
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: #000000;
	}
	.Icon{
		overflow: hidden;
		width: 100%;
		border-bottom: 0.03rem solid gainsboro;
		height: 25%;
		padding: 0.6rem 0 0;
	}
	.Icon ul li{
		float: left;
		width: 25%;
		text-align: center;
	}
	.Icon p{
		font-size: 2vw;
		padding-top: 0.15rem;
		padding-bottom: 0.3rem;
	}
	.Icon img{
		width: 1.1rem;
	}
</style>
